<!-- 滑动切换选项卡演示(标准写法) -->
<!--  此demo使用了uView的tabsSwiper全屏选项卡 https://uviewui.com/components/tabsSwiper.html -->
<template>
	<!-- 使用z-paging-swiper为根节点可以免计算高度 -->
	<z-paging-swiper >
		<!-- 此处代码复制了uView中tabsSwiper全屏选项卡的代码 -->
		<!-- 需要固定在顶部不滚动的view放在slot="top"的view中 -->
		<view slot="top">
			<u-tabs-swiper :bar-width="40" font-size="30" :bar-height="6" ref="uTabs" :list="tabList" @change="tabsChange" :current="current" :is-scroll="false"></u-tabs-swiper>
		</view>
		<!-- swiper必须设置height:100%，因为swiper有默认的高度，只有设置高度100%才可以铺满页面  -->
		<swiper class="swiper" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" :easing-function="'easeInCubic'">
			<swiper-item class="swiper-item" v-for="(item, index) in tabList" :key="index">
				<z-paging-swiper-item ref="swiperItem" :tabIndex="index" :currentIndex="current" @query="queryList"
					@updateList="updateList">
					<block v-for="(subItem,subIndex) in dataList[index]" :key="subIndex">
						<view class="apply-item" :class="subItem.status==4?'opacityS':''">
							<view class="apply-title font26 flex-between">
								<text>审批编号: &nbsp;{{subItem.order_no?subItem.order_no:'暂无'}}</text>
								<text class="co-yellow" v-if="subItem.status==0">审批中</text>
								<text class="co-yellow" v-if="subItem.status==1">审批中</text>
								<text class="co-green" v-if="subItem.status==2">已通过</text>
								<text class="co-red" v-if="subItem.status==3">已拒绝</text>
								<text class="co-grey" v-if="subItem.status==4">已撤销</text>
							</view>
							<view class="apply-cont">
								<view class="apply-info flex-between">
									<view class="info-left font30">
										申请人：{{userInfo.user_name}}
									</view>
									<view class="info-right font26" v-if="subItem.approve_type_text!='补卡申请' && subItem.approve_type_text!='销假申请'">
										<text>累计天数：</text>
										<text class="co-blue">{{subItem.time_length}}天</text>
									</view>
								</view>
								<view class="apply-state font26">
									{{subItem.approve_type_text}}
								</view>
								<view class="apply-department font26">
									部门：{{userInfo.ou_name}}  |  岗位：{{userInfo.post_name}}
								</view>
								<view class="apply-department font26">
									<block v-if="subItem.approve_type_text!='补卡申请' && subItem.approve_type_text!='销假申请'">
										申请时间：{{subItem.start_time}}
										 <!-- - {{subItem.end_time}} -->
									</block>
									<block v-if="subItem.approve_type_text=='补卡申请'">
										补卡时间：{{subItem.start_time}}
									</block>
									<block v-if="subItem.approve_type_text=='销假申请'">
										申请时间：{{subItem.created_at}}
									</block>
								</view>
								<view class="apply-detial flex-between font26">
									<text>{{subItem.created_at}}</text>
									<view class="apply-btn flex-right">
										<view class="apply-button" @click="dialogToggle(subItem.id)" v-if="subItem.status==0 || subItem.status==1">
											撤销
										</view>
										<view class="apply-button" @click="urllink('detail',subItem.id)">
											查看详情
										</view>
									</view>
								</view>
							</view>
						</view>
					</block>
				</z-paging-swiper-item>
			</swiper-item>
		</swiper>
		<!-- 提示框 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog :type="'info'" title="系统提示" content="是否撤销申请？" @confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
	</z-paging-swiper>
	
	
</template>

<script>
	export default {
		data() {
			return {
				dataList:[], //数据列表
				tabList: [{
					name: '全部'
				}, {
					name: '审批中'
				}, {
					name: '已通过'
				}, {
					name: '已拒绝'
				}, {
					name: '已撤销'
				}],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				
				selectId: '', //撤销id
			};
		},
		
		computed:{
			userInfo(){
				return uni.getStorageSync("USERINFO")
			}
		},
		
		methods: {
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			
			queryList(pageNo, pageSize) {
				this.$api.getApplyList({
					page: pageNo,
					pageSize: pageSize,
					status: this.current,
				}, true, (res) => {
					let list = res.list;
					for(let i in list)
					{
						list[i].created_at = this.$util.formatTime(list[i].created_at,'Y-M-D h:m')
						list[i].start_time = this.$util.formatTime(list[i].start_time,'Y-M-D h:m')
						list[i].end_time = this.$util.formatTime(list[i].end_time,'Y-M-D h:m')
					}
					
					this.$refs.swiperItem[this.current].complete(res.list);
				})
				
			},
			updateList(data) {
				//更新当前对应tab的数据，注意这里请用$set而非this.dataList[this.current]=data，因为需要触发列表渲染
				this.$set(this.dataList, this.current, data);
			},
			//页面跳转
			urllink(url,id){
				// 跳转到详情
				if(url == 'detail')
				{
					uni.navigateTo({
						url:"../apply/detail?id="+id
					})
				}
			},
			
			// 打开对话框
			dialogToggle(id) {
				this.selectId = id
				this.$refs.alertDialog.open()
			},
			//  关闭对话框
			dialogClose() {
				console.log('点击关闭')
			},
			// 确认
			dialogConfirm(val) {
				this.$api.revokeApply({
					id: this.selectId,
				}, true, (res) => {
					uni.showToast({
						title:"撤销成功",
					})
					this.updateList()
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page
	{
		.swiper {
			height: 100%;
		}
		.apply-item
		{
			padding: 0 4%;
			background: #fff;
			margin: auto;
			margin-top: 30rpx;
			
			.apply-title
			{
				padding: 20rpx 0;
				border-bottom: 1rpx solid #E6E6E6;
			}
			.apply-info
			{
				margin-top: 30rpx;
				.info-left
				{
					font-weight: bold;
					color: #454545;
				}
				.info-right
				{
					font-weight: 500;
					color: #454545;
					&:text
					{
						&:last-child{
							color: #008AFF;
						}
					}
				}
			}
			.apply-state
			{
				padding: 6rpx 20rpx;
				background: #FFFFFF;
				border: 1px solid #008AFF;
				border-radius: 50rpx;
				color: #008AFF;
				display: inline-block;
				margin: 20rpx 0;
			}
			.apply-department
			{
				font-weight: 500;
				color: #787878;
				
			}
			.apply-department
			{
				font-weight: 500;
				color: #787878;
				margin-bottom: 20rpx;
			}
			.apply-detial
			{
				padding: 30rpx 0;
				border-top: 1px solid #E6E6E6;
			}
			.apply-button
			{
				padding: 10rpx 20rpx;
				background: #fff;
				border-radius: 7rpx;
				border: 1rpx solid #008AFF;
				color: #008AFF;
				margin-left: 20rpx;
				&:last-child
				{
					background: #008AFF;
					border: 1rpx solid #008AFF;
					border-radius: 7rpx;
					color: #fff;
				}
			}
		}
		.opacityS{
			
		}
	}
	
</style>

